<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*  单行文本 */
        .wrap {
            width: 200px;
            overflow:hidden;/*超出部分隐藏*/
            text-overflow:ellipsis;/*超出部分显示省略号*/
            white-space:nowrap;/*规定段落中的文本不进行换行 */
        }
        /*  多行文本 */
        .wraps {
            width: 300px;
            overflow: hidden;
            /* 将对象作为弹性伸缩盒子模型显示  *必须结合的属性* */
            display: -webkit-box;   
            /* 设置伸缩盒对象的子元素的排列方式  *必须结合的属性* */
            -webkit-box-orient: vertical;   
            /* 用来限制在一个块元素中显示的文本的行数 */
            -webkit-line-clamp: 3;   
            /* 让浏览器实现在任意位置的换行 *break-all为允许在单词内换行* */
            word-break: break-all;   
        }
        .textwrap {
          /* 不换行 */
          white-space:nowrap;
          /* 自动换行 */
          word-wrap: break-word;
          word-break: normal;
          /* 强制换行 */
          word-break:break-all;
        }
        /* 两端对齐 */
        .wraptext {
            width: 300px;
            text-align: justify;
            /* //ie6-8 */
            text-justify: distribute-all-lines; 
            /* //一个块或行的最后一行对齐方式 */
            text-align-last: justify;  
            -moz-text-align-last: justify;
            -webkit-text-align-last: justify;
        }
        /* 禁止用户选择 */
        .textnoselect {
          -webkit-touch-callout: none;
          -webkit-user-select: none;
          -khtml-user-select: none;
          -moz-user-select: none;
          -ms-user-select: none;
          user-select: none;
        }





    </style>
</head>
<body>
    <div>
        
        <p class="wrap">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta repudiandae enim error! Ipsam consectetur quis unde maxime ducimus quo eius error possimus voluptate, maiores saepe deserunt quam eligendi amet praesentium?</p>
        <p class="wraps">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta repudiandae enim error! Ipsam consectetur quis unde maxime ducimus quo eius error possimus voluptate, maiores saepe deserunt quam eligendi amet praesentium?</p>

    </div>
    <div>
        <p class="wraptext textnoselect">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ea a commodi alias expedita inventore assumenda accusantium. Ducimus in mollitia nam cum, perferendis facere nostrum itaque dicta atque nobis debitis consequatur.</p>
    </div>
    
</body>
</html>